<template>
  <view class="deviceDetails">
    <view class="header">
      <image class="satellite" src="/static/satellite.png" mode="" />
      <text class="name">{{ t("deviceDetails.site") }}:</text>
      <text class="value">{{ siteName }}</text>
    </view>

    <template v-if="echartsType == 1">
      <view class="list">
        <view class="list-item" v-for="(item, index) in dataList" @click="goEquipmentDetail(item)">
          <view class="theNameOfTheDevice">
            <up-row>
              <up-col span="6">
                <view class="theNameOfTheDevice-name">
                  {{ item.deviceName }}
                </view>
              </up-col>
              <up-col span="6">
                <view class="theNameOfTheDevice-icon">
                  <text class="name">{{ item.deviceType }}</text>
                  <text class="icon" :class="item.workStatusType == -1
                    ? 'fault'
                    : item.workStatusType == 0
                      ? 'freeTime'
                      : item.workStatusType == 1
                        ? 'run'
                        : ''
                    ">
                    {{ item.workStatus }}
                  </text>
                </view>
              </up-col>
            </up-row>
          </view>

          <view class="list-item-content">
            <up-row>
              <up-col span="6">
                <view class="list-item-content-left">
                  <text>{{ t("deviceDetails.installedCapacity") }}:</text>
                  <text class="val">{{ formatElectricity(item.power) }}</text>
                </view>
              </up-col>
              <up-col span="6">
                <view class="list-item-content-right">
                  <text>{{ t("deviceDetails.installedPower") }}:</text>
                  <text class="val">
                    {{ formatPower(item.capacity) }}
                  </text>
                </view>
              </up-col>
            </up-row>
            <up-row>
              <up-col span="6">
                <view class="list-item-content-left">
                  <text>{{ t("deviceDetails.totalCharge") }}:</text>
                  <text class="val">
                    {{ formatElectricity(item.deviceCumulativeCharge) }}
                  </text>
                </view>
              </up-col>
              <up-col span="6">
                <view class="list-item-content-right">
                  <text>{{ t("deviceDetails.theTotalAmountOfDischarge") }}:</text>
                  <text class="val">
                    {{ formatElectricity(item.deviceCumulativeDischarge) }}
                  </text>
                </view>
              </up-col>
            </up-row>
          </view>
        </view>
      </view>
    </template>
    <!-- 故障 -->
    <template v-if="echartsType == 2">
      <view class="list-fault">
        <view class="list-item" v-for="(item, index) in dataList">
          <view class="theNameOfTheDevice">
            <up-row>
              <up-col span="7">
                <view class="theNameOfTheDevice-name">
                  {{ item.moduleName }}
                </view>
              </up-col>
              <up-col span="5">
                <view class="theNameOfTheDevice-icon">
                  <!-- <text class="name">{{ item.moduleName }}</text> -->
                  <text class="icon" :class="item.type == 1 ? 'icon-fault' : ''">
                    {{
                      item.type == 0
                        ? t("deviceDetails.alarm")
                        : t("deviceDetails.fault")
                    }}
                  </text>
                </view>
              </up-col>
            </up-row>
          </view>

          <view class="list-item-content">
            {{ item.alarmName }}
          </view>
          <view class="list-item-time">
            {{ item.createTime }}
          </view>
        </view>
      </view>
    </template>
    <up-loadmore :status="loadMoreStatus" :nomore-text="t('deviceDetails.noFurtherDataIsAvailable')"
      :loading-text="t('common.loadingText')" color="#9e9e9e" lineColor="#9e9e9e" dashed
      :line="loadMoreStatus == 'nomore'" />
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onPullDownRefresh, onReachBottom, onLoad } from "@dcloudio/uni-app";
import apis from "@/apis/index";
import { formatElectricity, formatPower } from "@/utils/utils";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const dataList = ref([]);
const pageNum = ref(1);
const loadMoreStatus = ref("loading");
const echartsType = ref(0);
const siteId = ref();
const siteName = ref();
onLoad((options) => {
  echartsType.value = options.echartsType;
  siteId.value = options.siteId;
  siteName.value = options.siteName;
  uni.setNavigationBarTitle({
    title:
      options.echartsType == 1
        ? t("deviceDetails.aListOfDevices")
        : t("deviceDetails.listOfFaults"),
  });
  fetchData();
});

const fetchData = async (callback) => {
  if (pageNum.value == 1) {
    dataList.value = [];
  }
  let params = {
    siteId: siteId.value,
    current: pageNum.value,
    limit: 10,
  };
  if (echartsType.value == 1) {
    apis.getDeviceList(params).then((res) => {
      if (res.code == 200) {
        dataList.value = res.data;
        loadMoreStatus.value = "nomore";
        if (callback) {
          callback();
        }
      }
    });
  } else if (echartsType.value == 2) {
    apis.getAlarmList(params).then((res) => {
      if (res.code == 200) {
        dataList.value = dataList.value.concat(res.data.records);
        if (res.data.records.length < 10) loadMoreStatus.value = "nomore";
        else loadMoreStatus.value = "loading";
        if (callback) {
          callback();
        }
      }
    });
  }
};
onPullDownRefresh(() => {
  pageNum.value = 1; // 重置页码
  loadMoreStatus.value = "more"; // 重置加载状态
  // 下拉刷新时重新获取数据
  fetchData(() => {
    // 数据获取完成后停止下拉刷新动画
    uni.stopPullDownRefresh();
  });
});

onReachBottom(() => {
  if (loadMoreStatus.value == "nomore") return; // 如果没有更多数据，直接返回
  loadMoreStatus.value = "loading";
  pageNum.value++;
  fetchData();
});

const goEquipmentDetail = (item) => {
  uni.navigateTo({
    url: `/pages/equipmentDetail/equipmentDetail?params=${JSON.stringify(
      item
    )}&siteName=${siteName.value}`,
  });
};
</script>

<style lang="scss" scoped>
.deviceDetails {
  width: 100%;
  padding: 32rpx 32rpx 32rpx 32rpx;
  box-sizing: border-box;

  .header {
    border-radius: 16rpx;
    width: 100%;
    margin-bottom: 24rpx;
    background: #132034;
    padding: 33rpx 24rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .satellite {
      width: 28rpx;
      height: 28rpx;
    }

    text {
      font-family: Alibaba PuHuiTi 3;
      font-size: 28rpx;
      font-weight: 500;
      font-variation-settings: "opsz" auto;
      color: #ffffff;
      margin: 0 12rpx;
    }
  }

  .list {
    width: 100%;

    .list-item {
      border-radius: 16rpx;
      width: 100%;
      margin-bottom: 24rpx;
      background: #132034;
      padding: 33rpx 24rpx;
      box-sizing: border-box;

      .theNameOfTheDevice-name {
        font-family: Alibaba PuHuiTi 3;
        font-size: 32rpx;
        font-weight: normal;
        font-variation-settings: "opsz" auto;
        color: #eeeeee;
        width: 100%;
        white-space: nowrap;
        /* 禁止文本换行 */
        overflow: hidden;
        /* 超出部分隐藏 */
        text-overflow: ellipsis;
        /* 超出部分显示省略号 */
      }

      .theNameOfTheDevice-icon {
        font-family: Alibaba PuHuiTi 3;
        font-size: 24rpx;
        font-weight: normal;
        font-variation-settings: "opsz" auto;
        color: #58d282;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        box-sizing: border-box;

        .name {
          font-family: Alibaba PuHuiTi 3;
          font-size: 32rpx;
          font-weight: normal;
          font-variation-settings: "opsz" auto;
          color: #eeeeee;
          margin-right: 20rpx;
        }

        .icon {
          padding: 13rpx 34rpx;
          border-radius: 80rpx;
          background: rgba(88, 210, 130, 0.16);
        }

        .fault {
          background: #412636;
          color: #fa3b3d;
        }

        .freeTime {
          background: #351a5d;
          color: #bf00ff;
        }

        .run {
          background: #19423c;
          color: #34c759;
        }
      }

      .list-item-content {
        margin-top: 30rpx;

        .list-item-content-left {
          font-family: Alibaba PuHuiTi 3;
          font-size: 28rpx;
          font-variation-settings: "opsz" auto;
          color: #dddddd;
          margin-bottom: 12rpx;
          display: flex;
          justify-content: space-between;

          .val {
            flex: 1;
            width: 100%;
            white-space: nowrap;
            /* 禁止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 超出部分显示省略号 */
          }
        }

        .list-item-content-right {
          font-family: Alibaba PuHuiTi 3;
          font-size: 28rpx;
          font-variation-settings: "opsz" auto;
          color: #dddddd;
          margin-bottom: 12rpx;

          display: flex;
          justify-content: space-between;

          text {
            flex: 1;
            width: 100%;
            white-space: nowrap;
            /* 禁止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 超出部分显示省略号 */
          }
        }
      }
    }
  }

  .list-fault {
    width: 100%;

    .list-item {
      border-radius: 16rpx;
      width: 100%;
      margin-bottom: 24rpx;
      background: #132034;
      padding: 33rpx 24rpx;
      box-sizing: border-box;

      .theNameOfTheDevice-name {
        font-family: Alibaba PuHuiTi 3;
        font-size: 32rpx;
        font-weight: normal;
        font-variation-settings: "opsz" auto;
        color: #eeeeee;
        width: 100%;
        white-space: nowrap;
        /* 禁止文本换行 */
        overflow: hidden;
        /* 超出部分隐藏 */
        text-overflow: ellipsis;
        /* 超出部分显示省略号 */
      }

      .theNameOfTheDevice-icon {
        font-family: Alibaba PuHuiTi 3;
        font-size: 24rpx;
        font-weight: normal;
        font-variation-settings: "opsz" auto;
        color: #58d282;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        box-sizing: border-box;

        .name {
          font-family: Alibaba PuHuiTi 3;
          font-size: 32rpx;
          font-weight: normal;
          font-variation-settings: "opsz" auto;
          color: #eeeeee;
          margin-right: 20rpx;
          width: 150rpx;
          white-space: nowrap;
          /* 禁止文本换行 */
          overflow: hidden;
          /* 超出部分隐藏 */
          text-overflow: ellipsis;
          /* 超出部分显示省略号 */
          text-align: right;
        }

        .icon {
          padding: 13rpx 24rpx;
          border-radius: 80rpx;
          background: #412636;
          color: #fa3b3d;
        }

        .icon-fault {
          padding: 13rpx 24rpx;
          border-radius: 80rpx;
          background: #412636;
          color: #ff9900;
        }
      }

      .list-item-content {
        margin-top: 20rpx;
        font-family: Alibaba PuHuiTi 3;
        font-size: 28rpx;
        font-weight: normal;
        font-variation-settings: "opsz" auto;
        color: #dddddd;
      }

      .list-item-time {
        margin-top: 20rpx;
        font-family: Alibaba PuHuiTi 3;
        font-size: 24rpx;
        font-weight: normal;
        font-variation-settings: "opsz" auto;
        color: #dddddd;
      }
    }
  }

  // .list {
  //   width: 100%;

  //   .list-item {
  //     border-radius: 16rpx;
  //     width: 100%;
  //     margin-bottom: 24rpx;
  //     background: #132034;
  //     padding: 33rpx 24rpx;
  //     box-sizing: border-box;
  //     .theNameOfTheDevice-name {
  //       font-family: Alibaba PuHuiTi 3;
  //       font-size: 32rpx;
  //       font-weight: normal;
  //       font-variation-settings: "opsz" auto;
  //       color: #eeeeee;
  //     }
  //     .theNameOfTheDevice-icon {
  //       font-family: Alibaba PuHuiTi 3;
  //       font-size: 24rpx;
  //       font-weight: normal;
  //       font-variation-settings: "opsz" auto;
  //       color: #58d282;
  //       text-align: right;
  //       .icon {
  //         padding: 13rpx 34rpx;
  //         border-radius: 80rpx;
  //         background: rgba(88, 210, 130, 0.16);
  //       }
  //     }
  //     .theNameOfTheDevice-icon-err {
  //       font-family: Alibaba PuHuiTi 3;
  //       font-size: 24rpx;
  //       font-weight: normal;
  //       font-variation-settings: "opsz" auto;
  //       color: #fa3b3d;
  //       text-align: right;
  //       .icon {
  //         padding: 13rpx 34rpx;
  //         border-radius: 80rpx;
  //         background: rgba(250, 59, 61, 0.16);
  //       }
  //     }
  //     .list-item-content {
  //       margin-top: 30rpx;

  //       .list-item-content-left {
  //         font-family: Alibaba PuHuiTi 3;
  //         font-size: 28rpx;
  //         font-variation-settings: "opsz" auto;
  //         color: #dddddd;
  //         margin-bottom: 12rpx;
  //       }
  //       .list-item-content-right {
  //         font-family: Alibaba PuHuiTi 3;
  //         font-size: 28rpx;
  //         font-variation-settings: "opsz" auto;
  //         color: #dddddd;
  //         margin-bottom: 12rpx;
  //       }
  //     }
  //   }
  // }
  // .bind-view {
  //   width: 100%;
  //   position: fixed;
  //   left: 0;
  //   bottom: 0;
  //   padding: 30rpx 32rpx 50rpx 32rpx;
  //   box-sizing: border-box;
  //   background-color: #08121E;
  // }
}
</style>
